<template>
    <div>
      <div class="content" @click="checkTime">
          <div class="content-rim">
            <p>打卡</p>
          </div>
        </div>
      <div class="outer-table">
        <div class="inner-table">
          <div>{{nowDate}}</div>
          <div>{{nowTime}}</div>
          <div>{{nowWeek}}</div>
        </div>
      </div>
    </div>
</template>
<script>

export default{
    data() {
      return {
        
      }
    },
    methods: {
      
    }
}
</script>
<style scoped>
*{
  margin: 0px;
  padding: 0px;
}

.content{
  width: 975px;
  height: 604px;
  border-radius: 10px;
  background-color: rgb(235, 234, 234);
  position: relative;
  left: 0px;
}
.content-rim{
  position: relative;
  top: 80px;
  left: 320px;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  font-size: 30px;
  background-color:rgb(133, 200, 255);
  border: 2px solid rgb(133, 200, 255);
  border-radius: 50%;
}
.content-rim:hover{
  color: white;
  font-size: 35px;
  background-color:  rgb(81, 177, 255);
}
.outer-table{
  display: table;
}
.inner-table{
  position:absolute;
  top: 350px;
  left: 200px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 500px;
  height: 150px;
  border: 1px solid black;
  border-radius: 10px;
  /* background-color: aqua; */
}
</style>
